<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
    <link rel="stylesheet" href="/stylesheets/bootstrap.min.css" media="screen">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
    <script type="text/javascript" src="/javascripts/layer/layer.js"></script>
</head>
<style>
    table, th , td {
        border: 1px solid grey;
        border-collapse: collapse;
        padding: 5px;
        text-align: center;
    }
    table tr:nth-child(odd) {
        background-color: #f1f1f1;
    }
    table tr:nth-child(even) {
        background-color: #ffffff;
    }
</style>
<body ng-app="myApp">
   <h1>管理系统</h1>
    <div ng-app="" ng-controller="table">
        <div style="margin-right: auto;margin-left: auto; width: 500px;">
        <button ng-click="add()">添加账号</button>
        <table  style="margin-top: 10px;">
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>密码</td>
                <td>年龄</td>
                <td>性别</td>
                <td>地址</td>
                <td>操作</td>
            </tr>
            <tr ng-repeat="x in names | orderBy : 'id' ">
                <td>{{ x.id }}</td>
                <td>{{ x.username }}</td>
                <td>{{ x.password }}</td>
                <td>{{ x.age }}</td>
                <td>{{ x.sex == 1 ? '女' : '男'}}</td>
                <td>{{ x.address }}</td>
                <td><button  ng-click="getdate(x)">修改</button>&nbsp;&nbsp;<button  ng-click="delete(x)">删除</button></td>
            </tr>
        </table>
        </div>
        <div id="addUser" class="container" hidden="hidden">
            <form class="col-sm-offset-4 col-sm-4 form-horizontal" role="form" method="post" onsubmit="return false">
                <fieldset>
                    <legend></legend>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <p class="tc">添加用户信息</p>
                        </div>
                        <div class="panel-body m15">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-user"></span>
                                    </span>
                                    <input type="text" class="form-control" id="addusername" name="addusername"  placeholder="请输入用户名" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-lock"></span>
                                    </span>
                                    <input type="text" class="form-control" id="addpassword" name="addpassword"  placeholder="请输入密码" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-lock"></span>
                                    </span>
                                    <input type="text" class="form-control" id="addage" name="addage"  placeholder="请输入年龄" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group">
                                        <label class="radio-inline">男<input style="margin-left: 10px;" type="radio" ng-model="x.sex" name="addsex" ng-checked="true" value="2"></label>
                                        <label class="radio-inline">女<input style="margin-left: 10px;" type="radio" ng-model="x.sex" name="addsex" value="1"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-lock"></span>
                                    </span>
                                    <input type="text" class="form-control" id="addaddress" name="addaddress"  placeholder="请输入地址" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <button type="submit"  style="width: 170px;float: left;margin: 10px 2px 0px 3px;" class="btn btn-primary btn-block" ng-click="adddata()">添加</button>
                                <button type="submit" style="width: 170px;margin: 10px;"  class="btn btn-danger  btn-block" onclick="black()">关闭</button>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
        <div id="updateUser" class="container" hidden="hidden">
            <form class="col-sm-offset-4 col-sm-4 form-horizontal" role="form" method="post" onsubmit="return false">
                <fieldset>
                    <legend></legend>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <p class="tc">修改用户信息</p>
                        </div>
                        <div class="panel-body m15"  ng-repeat="x in updatedata">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-user"></span>
                                    </span>
                                    <input type="text" class="form-control" id="upusername" name="username" value="{{x.username}}" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-lock"></span>
                                    </span>
                                    <input type="text" class="form-control" id="uppassword" name="password" value="{{x.password}}"   required>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-lock"></span>
                                    </span>
                                    <input type="text" class="form-control" id="upage" name="age"   value="{{x.age}}"   required>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                   <label class="radio-inline">男<input style="margin-left: 10px;" type="radio" ng-model="x.sex" name="sex" value="2"></label>
                                    <label class="radio-inline">女<input style="margin-left: 10px;" type="radio" ng-model="x.sex" name="sex" value="1"></label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-lock"></span>
                                    </span>
                                    <input type="text" class="form-control" id="upaddress" name="address"  value="{{x.address}}"   required>
                                </div>
                            </div>
                            <div class="form-group">
                                <button type="submit" style="width: 170px;float: left;margin: 10px 2px 0px 3px;" class="btn btn-primary btn-block" ng-click="update(x)">修改</button>
                                <button type="submit" style="width: 170px;margin: 10px" class="btn btn-danger btn-block" onclick="black()">关闭</button>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>

<script>
    var app = angular.module('myApp', ['ngRoute']);
    //查询数据
    app.controller('table',function($scope,$http){
        $http({
            method  : 'post',
            url     : 'page',
        }).success(function(data) {
            $scope.names=data;
        }).error(function(data,status,headers,config){
            alert("错误");
        });
        //删除用户信息
        $scope.delete=function(x){
            id=x.id;
            $http({
                method  : 'post',
                url     : 'deleteStudent',
                params:{'id':id},
            }).success(function(data) {
                var d=eval(data);
                 if(d.code==10){
                     alert(d.msg);
                     setTimeout(function(){
                         location.href="page";
                     })
                 }else{
                     alert(d.msg);
                 }

            }).error(function(data,status,headers,config){
                alert("错误");
            });
        };

        //获取用户信息
        $scope.getdate=function(x){
            $("#updateUser").show();
            $("#addUser").hide();
            var id= x.id;
            $http({
                method  : 'post',
                url     : 'getStudent',
                params:{'id':id},
            }).success(function(data) {
                $scope.updatedata=data;
            }).error(function(data,status,headers,config){
                alert("错误");
            });
        };
        //修改用户信息
        $scope.update=function(x){
            var username = $("#upusername").val();
            var password = $("#uppassword").val();
            var age = $("#upage").val();
            var sex = $("input[name=sex]:checked").val();
            var address = $("#upaddress").val();
            var id = x.id;
            $http({
                method  : 'post',
                url     : 'updateStudent',
                params:{"uname":username,"upwd":password,"age":age,"sex":sex,"address":address,"id":id},
            }).success(function(data) {
                location.href="page";
            }).error(function(data,status,headers,config){
                alert("错误");
            });
        };

        //添加用户页面
        $scope.add=function(){
            $("#addUser").show();
            $("#updateUser").hide();
        }
        //添加用户信息
        $scope.adddata=function(){
            var username = $("#addusername").val();
            var password = $("#addpassword").val();
            var age = $("#addage").val();
            var sex = $("input[name=addsex]:checked").val();
            var address = $("#addaddress").val();
            $http({
                method  : 'post',
                url     : 'insertdata',
                params:{"uname":username,"upwd":password,"age":age,"sex":sex,"address":address},
            }).success(function(data) {
                var d=eval(data);
                if(d.code==10){
                    layer.msg(d.msg);
                    setTimeout(function(){
                        location.href="page";
                    },1000)
                }
                if(d.code==11){
                    layer.msg(d.msg);
                }
            }).error(function(data,status,headers,config){
                alert("错误");
            });
        };
    })
    //关闭
    function black(){
        $("#addUser").hide();
        $("#updateUser").hide();
    }


</script>

</body>
</html>
